<template>
	<view style="background: #F1F5FF;height: 100%;width: 100%;">
		
		<myHeadTab>测试</myHeadTab>
		
		<view class="b1">
			
			<view class="b2" style="display: flex;">
				
				<view style="height: 100%;width: 32.24rpx;">
					<image style="height: 32.24rpx;width: 32.24rpx;position: relative;top: 8rpx;" src="../../../static/提示.png"></image>
				</view>
				
				<view style="width: 16rpx;height: 100%;"></view>
				
				<view class="b3">
					对招宣知识的掌握程度以及理解分析信息和解决问题的能力，可以更好地武装头脑，指导实践推动工作。
				</view>
				
				
			</view>
			
		</view>
		
		<view style="height: 20rpx;width: 100%;"></view>
		
		<view style="display: flex;">
			
			<view style="height: 100%;width: 30rpx;"></view>
			
			<view class="card">
				<view style="height: 76rpx;width: 100%;display: flex;">
					
					<view style="height: 76rpx;width: 488rpx;">
						<view style="height: 32rpx;width: 100%;"></view>
						<text class="f2">{{exam?.title}}</text>
					</view>
					
					<view style="height: 100%;width: 60rpx;"></view>
					
					<image v-if="!exam?.isAccess" style="height: 72rpx;width: 88rpx;" src="../../../static/未通过.png"></image>
					
					<image v-else style="height: 72rpx;width: 88rpx;" src="../../../static/已通过.png"></image>
				</view>
				
				
				<view style="height: 16rpx;width: 100%;"></view>
				
				<view style="height: 240rpx;width: 100%;">
					
					<view class="v">
						<text class="f3">开始日期：{{exam?.beginTime}}</text>
					</view>
					
					<view class="v">
						<text class="f3">考试年度：{{exam?.yearAnnual}}</text>
					</view>
					
					<view class="v">
						<text class="f3">评卷人：{{exam?.grades}}</text>
					</view>
					
					<view class="v">
						<text class="f3">考生：{{exam?.examinee}}</text>
					</view>
					
					<view class="v">
						<text class="f3">结束日期：{{exam?.endTime}}</text>
					</view>
					
					<view class="v">
						<text class="f3">得分：<font class="f4">{{exam?.score}}</font></text>
					</view>
					
				</view>
				
			</view>
			
		</view>
		
		
		
		<view style="background: #F1F5FF;height: 100%;">
			
			<view v-if="()=>{exam?.topic.forEach((item)=>{if(item.type=='单选题'){return true;}});return false}">
				
				<view style="height: 50rpx;width: 100%;"></view>
				
				<view style="height: 52rpx;width: 166rpx;background-size: 100%;background-image: url(../../../static/bg.png);padding-left: 30rpx;padding-top: 8rpx;">	
					<text class="f5">一.单选题</text>
				</view>
				
				<view style="height: 32rpx;width: 100%;"></view>
				
				<template v-for="(item,index) in exam?.topic.filter((item)=>{if(item.type=='单选题'){return item}})">
					<view style="height: 100%;width: 100%;display: flex;">
						
						<view style="height: 100%;width: 32rpx;"></view>
						
						<view>
							<text class="f6">{{index+1}}.{{formatQuestion(item.topicTitle,item.examineeAnswer)}}</text>
						
							<template v-for="(item,index) in item.answer">
								<view style="height: 20rpx;width: 100%;"></view>
								<text class="f6">{{item.option}}、{{item.content}}</text>
							</template>
							
							<view style="height: 20rpx;width: 100%;"></view>
							
							<view class="f7" style="height: 40rpx;width: 100%;">
								正确答案：{{item.rightAnswer}} <font class="f8" v-if="item.examineeScore > 0">+{{item.topicScore}}分</font>
							</view>
							
							
						</view>
	
					</view>
					<view style="height: 32rpx;width: 100%;"></view>
				</template>
				
				
			</view>
			
			
			
			<view v-if="()=>{exam?.topic.forEach((item)=>{if(item.type=='多选题'){return true;}});return false}">
				
				<view style="height: 16rpx;width: 100%;"></view>
				
				<view style="height: 52rpx;width: 166rpx;background-size: 100%;background-image: url(../../../static/bg.png);padding-left: 30rpx;padding-top: 8rpx;">	
					<text class="f5">二.多选题</text>
				</view>
				
				<view style="height: 32rpx;width: 100%;"></view>
				
				<template v-for="(item,index) in exam?.topic.filter((item)=>{if(item.type=='多选题'){return item}})">
					<view style="height: 100%;width: 100%;display: flex;">
						
						<view style="height: 100%;width: 32rpx;"></view>
						
						<view>
							<text class="f6">{{index+1}}.{{formatQuestion(item.topicTitle,item.examineeAnswer) }}</text>
						
							<template v-for="(item,index) in item.answer">
								<view style="height: 20rpx;width: 100%;"></view>
								<text class="f6">{{item.option}}、{{item.content}}</text>
							</template>
							
							<view style="height: 20rpx;width: 100%;"></view>
							
							<view class="f7" style="height: 40rpx;width: 100%;">
								正确答案：{{item.rightAnswer}} <font class="f8" v-if="item.examineeScore > 0">+{{item.topicScore}}分</font>
							</view>
							
							
						</view>
				
					</view>
					<view style="height: 32rpx;width: 100%;"></view>
				</template>
				
			</view>
			
			
			<view v-if="()=>{exam?.topic.forEach((item)=>{if(item.type=='填空题'){return true;}});return false}">
				
				<view style="height: 16rpx;width: 100%;"></view>
				
				<view style="height: 52rpx;width: 166rpx;background-size: 100%;background-image: url(../../../static/bg.png);padding-left: 30rpx;padding-top: 8rpx;">	
					<text class="f5">三.填空题</text>
				</view>
				
				<view style="height: 32rpx;width: 100%;"></view>
				
				<template v-for="(item,index) in exam?.topic.filter((item)=>{if(item.type=='填空题'){return item}})">
					<view style="height: 100%;width: 100%;display: flex;">
						
						<view style="height: 100%;width: 32rpx;"></view>
						
						<view>
							<text class="f6">{{index+1}}.{{item.topicTitle}}</text>
						
							<template v-for="(item,index) in item.answer">
								<view style="height: 20rpx;width: 100%;"></view>
								<text class="f6">{{item.option}}、{{item.content}}</text>
							</template>
							
							<view style="height: 20rpx;width: 100%;"></view>
							
							<view class="i f9">
								{{item.examineeAnswer}}
							</view>
							
							<view style="height: 20rpx;width: 100%;"></view>
							
							<view class="f7" style="height: 40rpx;width: 100%;">
								正确答案：{{item.rightAnswer}} <font class="f8" v-if="item.examineeScore > 0">+{{item.topicScore}}分</font>
							</view>
							
							
						</view>
				
					</view>
					<view style="height: 32rpx;width: 100%;"></view>
				</template>
				
			</view>
			
			
			
		</view>
		
		
		
	</view>
	
	
</template>

<script setup>
import myHeadTab from '../../../component/myHeadTab/index.vue'
import { onMounted,ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

	const testId = ref();
	onLoad((options) => {
		console.log('接受值:',options);
		testId.value = options.testId;
	})

function formatQuestion(question, answer) {  
    return question.replace('（', `（ ${answer} `); 
}  



const userId = ref(1)

const exam = ref()

onMounted(()=>{
	uni.request({
		url: '/data/test.json',
		data:{testId: testId.value,userId: userId.value},
		method: 'POST',
		success(res) {
			exam.value = res.data.at(2);
		}
	})
})

</script>

<style scoped>
.i{
	width: 662rpx;
	height: 72rpx;
	background: #FFFFFF;
	border: 2rpx solid #E7EDFB;
	border-radius: 8rpx;
	padding-left: 24rpx;
}
	
.b1{
	width: 100%;
	height: 98rpx;
	background: #FFF5E6;
	padding-top: 18rpx;
	padding-left: 24rpx;

}
.b2{
	width: 704rpx;
	height: 80rpx;
}
.b3{
	width: 656rpx;
	height: 80rpx;
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 24rpx;
	color: #FF7700;
	letter-spacing: 0;
	line-height: 40rpx;
}
.f1{
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 24rpx;
	color: #FF7700;
	letter-spacing: 0;
	line-height: 40rpx;
}
.card{
	width: 654rpx;
	height: 364rpx;
	background: #FFFFFF;
	box-shadow: 0 6rpx 12rpx 0 #c9cfd980;
	border-radius: 16rpx;
	padding-left: 32rpx;

}
.f2{
	font-family: PingFangSC-Medium;
	font-weight: 500;
	font-size: 30rpx;
	color: #000000;
	letter-spacing: 0;
}
.f3{
	 color: #5d5c5c;
	 font-size: 24rpx;
	 font-face: PingFangSC;
	 font-weight: 400;
	 letter-spacing: 0;
	 paragraph-spacing: 0;
	 text-align: left;
	 line-height: 40rpx;
}

.f4{
	 color: #ff7700;
	 font-size: 24rpx;
	 font-face: PingFangSC;
	 font-weight: 400;
	 line-height: 40rpx;
	 letter-spacing: 0;
	 paragraph-spacing: 0;
	 text-align: left;
}
.v{
	width: 100%;
	height: 40rpx;
}
.f5{
	font-family: PingFangSC-Medium;
	font-weight: 500;
	font-size: 32rpx;
	color: #FFFFFF;
	letter-spacing: 0;
}
.f6{
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 30rpx;
	color: #000000;
	letter-spacing: 0;
}
.f7{
	 color: #5d5c5c;
	 font-size: 24rpx;
	 font-face: PingFangSC;
	 font-weight: 400;
	 line-height: 40rpx;
	 letter-spacing: 0;
	 paragraph-spacing: 0;
	 text-align: left;
}
.f8{
	 color: #ff7700;
	 font-size: 24rpx;
	 font-face: PingFangSC;
	 font-weight: 400;
	 line-height: 40rpx;
	 letter-spacing: 0;
	 paragraph-spacing: 0;
	 text-align: left;
}
.f9{
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 24rpx;
	color: #000000;
	letter-spacing: 0;
	line-height: 72rpx;
}
</style>
